import React from 'react';
import {createSchemaField, FormProvider, SchemaReactComponents} from '@formily/react';
import {FormItem, Submit, Input, Password, FormButtonGroup, Reset} from '@formily/antd';
import {createForm, IFormProps} from '@formily/core';
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import styles from './LoginForm.less';
import {LoginInterface, LoginResInterface} from '@/types/interface/login.interface';
import {login} from '@/services/login.service';
import {history} from '@@/core/history';
import {useSessionStorageState} from 'ahooks';
import {UserInterface} from '@/types/interface/user.interface';
import {message} from 'antd';

const LoginForm = () => {
    const normalForm = createForm<IFormProps>({
        validateFirst: true,
    });
    const [userInfo, setUserInfo] = useSessionStorageState<UserInterface>('userInfo');
    const SchemaField = createSchemaField<SchemaReactComponents>({
        components: {
            FormItem, Input, Password,
        },
    });
    const normalSchema = {
        type: 'object',
        properties: {
            username: {
                type: 'string',
                title: '',
                required: true,
                'x-decorator': 'FormItem',
                'x-component': 'Input',
                'x-component-props': {
                    prefix: <UserOutlined/>,
                    placeholder: '用户名： admin',
                    style: {
                        width: '400px',
                        height: '40px',
                    },
                },
            },
            password: {
                type: 'string',
                title: '',
                required: true,
                'x-decorator': 'FormItem',
                'x-component': 'Password',
                'x-component-props': {
                    prefix: <LockOutlined/>,
                    placeholder: '密码： 123456',
                    style: {
                        width: '400px',
                        height: '40px',
                    },
                },
            },
        },
    };
    const submit = ($event: LoginInterface) => {
        if (normalForm.valid) {
            login($event).then((res: LoginResInterface) => {
                if (res.LoginStatues) {
                    history.push('home');
                    setUserInfo(res.userInfo);
                    message.success('登录成功');
                }
            });
        }
    };
    return (
        <div className={styles['form-content']}>
            <FormProvider form={normalForm}>
                <SchemaField schema={normalSchema}/>
                <FormButtonGroup align={'center'} gutter={40}>
                    <Submit block size="large" style={{width: '180px'}} onSubmit={submit}>
                        登录
                    </Submit>
                    <Reset forceClear size="large" style={{width: '180px'}}>重置</Reset>
                </FormButtonGroup>
            </FormProvider>
        </div>
    );
};
export default LoginForm;
